<template>
  <cl-page>
    <cl-sticky>
      <cl-topbar>
        <cl-row type="flex" justify="center">
          <cl-icon :class-name="status?.icon" :size="60" :margin="[0, 6, 0, 0]" />
          <cl-text :size="28">{{ status?.desc }}</cl-text>
        </cl-row>
      </cl-topbar>
    </cl-sticky>

    <view class="page">
      <!-- 收货地址 -->
      <address-select :data="info?.address" disabled />

      <!-- 商品列表 -->
      <goods-group :data="info?.goodsList" readonly />

      <view class="card">
        <text class="label">价格明细</text>

        <cl-list-item :label="`商品总价（共${info?.goodsList?.length || 0}件商品）`" :arrow-icon="false">
          <template #icon>
            <cl-icon class-name="shop-icon-q-order" :size="40" />
          </template>

          <cl-text :size="28" type="price" :value="info?.price" />
        </cl-list-item>

        <!--cl-list-item
					label="优惠金额"
					:arrow-icon="false"
					@tap="showDiscount = !showDiscount"
				>
					<template #icon>
						<cl-icon class-name="shop-icon-coupon" :size="40" />
					</template>

					<cl-text :size="28" color="error">-</cl-text>
					<cl-text :size="28" type="price" color="error" :value="info?.discountPrice" />

					<cl-icon
						name="arrow-bottom"
						:margin="[0, 0, 0, 10]"
						:size="24"
						v-if="info?.discountSource"
					/>
				</cl-list-item-->

        <!-- 优惠信息 -->
        <!--view class="discount-info" v-if="showDiscount && info?.discountSource">
					{{ info?.discountSource?.info.title }}：满
					{{ info?.discountSource?.info.condition?.fullAmount }} 元减
					{{ info?.discountSource?.info.amount }} 元
				</view-->

        <cl-list-item label="运费" :arrow-icon="false">
          <template #icon>
            <cl-icon class-name="shop-icon-order-received" :size="40"></cl-icon>
          </template>

          <cl-text :size="28" type="price" :value="info?.freightPrice"></cl-text>
        </cl-list-item>

        <cl-list-item label="实付金额" :arrow-icon="false">
          <template #icon>
            <cl-icon class-name="shop-icon-q-pay" :size="40" />
          </template>

          <cl-text :size="32" type="price" :value="info?.payPrice" />
        </cl-list-item>
      </view>

      <view class="card" v-if="info?.refund">
        <text class="label">售后/退款</text>

        <cl-list-item label="退款金额" :arrow-icon="false">
          <cl-text :size="32" type="price" color="error" :value="info?.refund?.amount || 0" />
        </cl-list-item>

        <cl-list-item label="退款状态" :arrow-icon="false">
          {{ dict.getLabel(RefundStatus, info.refund.status) }}
        </cl-list-item>

        <cl-list-item label="申请原因" :arrow-icon="false">
          {{ info.refund.reason }}
        </cl-list-item>

        <template v-if="info.refund.status == 2">
          <cl-list-item label="拒绝原因" :arrow-icon="false" />

          <cl-text block color="error" :margin="[0, 0, 20, 0]" :line-height="1.4">{{
						info.refund.refuseReason
					}}</cl-text>
        </template>
      </view>

      <view class="card">
        <text class="label">订单信息</text>

        <cl-list-item label="订单编号" :arrow-icon="false">
          <cl-text copy>{{ info?.orderNum }} </cl-text>

          <cl-button size="small" type="primary" :height="40" :width="70" :font-size="22" :margin="[0, 0, 0, 10]"
            @tap="toCopy">复制</cl-button>
        </cl-list-item>

        <cl-list-item label="支付方式" :arrow-icon="false">
          {{ dict.getLabel(PayType, info?.payType) }}
        </cl-list-item>

        <cl-list-item label="支付时间" :arrow-icon="false" v-if="info?.payType">
          {{ info?.payTime }}
        </cl-list-item>

        <cl-list-item label="下单时间" :arrow-icon="false">
          {{ info?.createTime }}
        </cl-list-item>

        <cl-list-item label="订单备注" :arrow-icon="false">
          {{ info?.remark || "暂无备注" }}
        </cl-list-item>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <cl-footer :flex="false" border :vt="[info?.status]" v-if="info">
      <order-op-btns :info="info" @command="refs.orderOp?.open" />
    </cl-footer>

    <!-- 订单操作 -->
    <order-op :ref="setRefs('orderOp')" @success="refresh()" />
  </cl-page>
</template>

<script lang="ts" setup>
  import { onPullDownRefresh, onReady, onShow } from "@dcloudio/uni-app";
  import { useCool, useStore } from "/@/cool";
  import { computed, ref } from "vue";
  import { useUi } from "/$/cool-ui";
  import { OrderStatus, PayType, RefundStatus } from "./dict";
  import AddressSelect from "/@/components/address/select.vue";
  import GoodsGroup from "/@/components/goods/group.vue";
  import OrderOp from "./components/op.vue";
  import OrderOpBtns from "./components/op-btns.vue";

  const { router, service, refs, setRefs } = useCool();
  const { dict } = useStore();
  const ui = useUi();

  // 显示优惠信息
  const showDiscount = ref(false);

  // 订单详情
  const info = ref<OrderInfo>();

  // 订单状态
  const status = computed(() => {
    return OrderStatus.find((e) => e.value == info.value?.status);
  });

  // 实付金额
  const paidAmount = computed(() => {
    return Number(info.value?.price || 0) - Number(info.value?.discountPrice || 0);
  });

  // 获取订单详情
  async function refresh() {
    ui.showLoading();

    await service.order.info
      .info({
        id: router.query.id,
      })
      .then((res) => {
        info.value = res;
      })
      .catch((err) => {
        ui.showTips(err.message, () => {
          router.back();
        });
      });

    ui.hideLoading();
  }

  // 复制订单号
  function toCopy() {
    uni.setClipboardData({
      data: info.value?.orderNum!,
    });
  }

  onPullDownRefresh(async () => {
    await refresh();
    uni.stopPullDownRefresh();
  });

  onReady(() => {
    refresh();
  });

  onShow(() => {
    if (ui.loaded) {
      refresh();
    }
  });
</script>

<style lang="scss" scoped>
  .page {
    padding: 24rpx;

    .discount-info {
      background-color: $cl-color-bg;
      color: #444;
      padding: 12rpx;
      border-radius: 12rpx;
      font-size: 24rpx;
      text-align: right;
    }
  }
</style>